<template>
  <div class="component-demo">
    <div class="demo-container">
      <h1 class="demo-title">CRUD 组件演示</h1>

      <!-- Button 组件演示 -->
      <section class="demo-section">
        <h2 class="section-title">Button 组件</h2>
        <div class="demo-content">
          <div class="button-group">
            <h3>CRUD 类型按钮</h3>
            <div class="button-row">
              <CrudButton type="add">新增</CrudButton>
              <CrudButton type="edit">编辑</CrudButton>
              <CrudButton type="delete">删除</CrudButton>
              <CrudButton type="view">查看</CrudButton>
              <CrudButton type="search">搜索</CrudButton>
              <CrudButton type="export">导出</CrudButton>
              <CrudButton type="import">导入</CrudButton>
              <CrudButton type="batch-delete">批量删除</CrudButton>
            </div>
          </div>

          <div class="button-group">
            <h3>不同尺寸</h3>
            <div class="button-row">
              <CrudButton type="add" size="large">大型按钮</CrudButton>
              <CrudButton type="add" size="default">默认按钮</CrudButton>
              <CrudButton type="add" size="small">小型按钮</CrudButton>
            </div>
          </div>

          <div class="button-group">
            <h3>按钮状态</h3>
            <div class="button-row">
              <CrudButton type="add">正常状态</CrudButton>
              <CrudButton type="add" disabled>禁用状态</CrudButton>
              <CrudButton type="add" loading>加载状态</CrudButton>
              <CrudButton type="add" round>圆角按钮</CrudButton>
              <CrudButton type="add" circle :icon="Plus">圆形按钮</CrudButton>
            </div>
          </div>
        </div>
      </section>

      <!-- Input 组件演示 -->
      <section class="demo-section">
        <h2 class="section-title">Input 组件</h2>
        <div class="demo-content">
          <div class="input-group">
            <h3>基础输入框</h3>
            <div class="input-row">
              <CrudInput v-model="inputValue1" placeholder="请输入内容" />
              <CrudInput v-model="inputValue2" placeholder="带清除按钮" clearable />
              <CrudInput v-model="inputValue3" placeholder="禁用状态" disabled />
            </div>
          </div>

          <div class="input-group">
            <h3>不同尺寸</h3>
            <div class="input-row">
              <CrudInput v-model="inputValue4" placeholder="大型输入框" size="large" />
              <CrudInput v-model="inputValue5" placeholder="默认输入框" size="default" />
              <CrudInput v-model="inputValue6" placeholder="小型输入框" size="small" />
            </div>
          </div>

          <div class="input-group">
            <h3>带图标</h3>
            <div class="input-row">
              <CrudInput v-model="inputValue7" placeholder="前缀图标" :prefix-icon="Search" />
              <CrudInput v-model="inputValue8" placeholder="后缀图标" :suffix-icon="User" />
            </div>
          </div>
        </div>
      </section>

      <!-- Select 组件演示 -->
      <section class="demo-section">
        <h2 class="section-title">Select 组件</h2>
        <div class="demo-content">
          <div class="select-group">
            <h3>基础选择器</h3>
            <div class="select-row">
              <CrudSelect v-model="selectValue1" placeholder="请选择">
                <el-option label="选项1" value="option1" />
                <el-option label="选项2" value="option2" />
                <el-option label="选项3" value="option3" />
              </CrudSelect>

              <CrudSelect v-model="selectValue2" placeholder="可清除" clearable>
                <el-option label="选项1" value="option1" />
                <el-option label="选项2" value="option2" />
                <el-option label="选项3" value="option3" />
              </CrudSelect>

              <CrudSelect v-model="selectValue3" placeholder="禁用状态" disabled>
                <el-option label="选项1" value="option1" />
                <el-option label="选项2" value="option2" />
                <el-option label="选项3" value="option3" />
              </CrudSelect>
            </div>
          </div>

          <div class="select-group">
            <h3>多选模式</h3>
            <div class="select-row">
              <CrudSelect v-model="selectValue4" placeholder="多选" multiple>
                <el-option label="选项1" value="option1" />
                <el-option label="选项2" value="option2" />
                <el-option label="选项3" value="option3" />
                <el-option label="选项4" value="option4" />
              </CrudSelect>
            </div>
          </div>

          <div class="select-group">
            <h3>不同尺寸</h3>
            <div class="select-row">
              <CrudSelect v-model="selectValue5" placeholder="大型选择器" size="large">
                <el-option label="选项1" value="option1" />
                <el-option label="选项2" value="option2" />
              </CrudSelect>

              <CrudSelect v-model="selectValue6" placeholder="默认选择器" size="default">
                <el-option label="选项1" value="option1" />
                <el-option label="选项2" value="option2" />
              </CrudSelect>

              <CrudSelect v-model="selectValue7" placeholder="小型选择器" size="small">
                <el-option label="选项1" value="option1" />
                <el-option label="选项2" value="option2" />
              </CrudSelect>
            </div>
          </div>
        </div>
      </section>

      <!-- Pagination 组件演示 -->
      <section class="demo-section">
        <h2 class="section-title">Pagination 组件</h2>
        <div class="demo-content">
          <div class="pagination-group">
            <h3>基础分页</h3>
            <CrudPagination v-model:current-page="currentPage1" v-model:page-size="pageSize1" :total="1000"
              layout="total, sizes, prev, pager, next, jumper" />
          </div>

          <div class="pagination-group">
            <h3>简洁分页</h3>
            <CrudPagination v-model:current-page="currentPage2" v-model:page-size="pageSize2" :total="500"
              layout="prev, pager, next" :background="false" />
          </div>

          <div class="pagination-group">
            <h3>不同尺寸</h3>
            <div class="pagination-sizes">
              <div>
                <h4>大型分页</h4>
                <CrudPagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" :total="300"
                  size="large" layout="prev, pager, next" />
              </div>

              <div>
                <h4>默认分页</h4>
                <CrudPagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :total="300"
                  size="default" layout="prev, pager, next" />
              </div>

              <div>
                <h4>小型分页</h4>
                <CrudPagination v-model:current-page="currentPage5" v-model:page-size="pageSize5" :total="300"
                  size="small" layout="prev, pager, next" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElOption } from 'element-plus'
import { Plus, Search, User } from '@element-plus/icons-vue'


// Input 组件数据
const inputValue1 = ref('')
const inputValue2 = ref('')
const inputValue3 = ref('')
const inputValue4 = ref('')
const inputValue5 = ref('')
const inputValue6 = ref('')
const inputValue7 = ref('')
const inputValue8 = ref('')

// Select 组件数据
const selectValue1 = ref('')
const selectValue2 = ref('')
const selectValue3 = ref('')
const selectValue4 = ref([])
const selectValue5 = ref('')
const selectValue6 = ref('')
const selectValue7 = ref('')

// Pagination 组件数据
const currentPage1 = ref(1)
const pageSize1 = ref(10)
const currentPage2 = ref(1)
const pageSize2 = ref(10)
const currentPage3 = ref(1)
const pageSize3 = ref(10)
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const currentPage5 = ref(1)
const pageSize5 = ref(10)
</script>

<style lang="scss" scoped>
.component-demo {
  min-height: 100vh;
  background-color: $bg-color-light;
  padding: 20px;
}

.demo-container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: $bg-color-white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.demo-title {
  text-align: center;
  padding: 30px 0;
  margin: 0;
  background: linear-gradient(135deg, var(--primary-color, $primary-color), var(--primary-color-light, $primary-color-light));
  color: white;
  font-size: 32px;
  font-weight: 600;
}

.demo-section {
  padding: 40px;
  border-bottom: 1px solid $border-color-lighter;

  &:last-child {
    border-bottom: none;
  }
}

.section-title {
  font-size: 24px;
  color: $text-color-primary;
  margin: 0 0 30px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color, $primary-color);
  display: inline-block;
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

// Button 组件样式
.button-group {
  h3 {
    font-size: 16px;
    color: $text-color-secondary;
    margin: 0 0 15px 0;
  }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

// Input 组件样式
.input-group {
  h3 {
    font-size: 16px;
    color: $text-color-secondary;
    margin: 0 0 15px 0;
  }
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;

  .crud-input {
    min-width: 200px;
  }
}

// Select 组件样式
.select-group {
  h3 {
    font-size: 16px;
    color: $text-color-secondary;
    margin: 0 0 15px 0;
  }
}

.select-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;

  .crud-select {
    min-width: 200px;
  }
}

// Pagination 组件样式
.pagination-group {
  h3 {
    font-size: 16px;
    color: $text-color-secondary;
    margin: 0 0 15px 0;
  }

  h4 {
    font-size: 14px;
    color: $text-color-muted;
    margin: 0 0 10px 0;
  }
}

.pagination-sizes {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .pagination-sizes>div {
    padding: 20px;
    background-color: $bg-color-light;
    border-radius: 6px;
    border: 1px solid $border-color-lighter;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .component-demo {
    padding: 10px;
  }

  .demo-container {
    margin: 0;
  }

  .demo-section {
    padding: 20px;
  }

  .demo-title {
    font-size: 24px;
    padding: 20px 0;
  }

  .section-title {
    font-size: 20px;
  }

  .button-row,
  .input-row,
  .select-row {
    flex-direction: column;
    align-items: stretch;

    .crud-input,
    .crud-select {
      min-width: auto;
      width: 100%;
    }
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .component-demo {
    background-color: $bg-color-light-dark;
  }

  .demo-container {
    background-color: $bg-color-card-dark;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }

  .section-title {
    color: $text-color-primary-dark;
  }

  .demo-section {
    border-bottom-color: $border-color-lighter-dark;
  }

  .button-group h3,
  .input-group h3,
  .select-group h3,
  .pagination-group h3 {
    color: $text-color-secondary-dark;
  }

  .pagination-group h4 {
    color: $text-color-muted-dark;
  }

  .pagination-sizes>div {
    background-color: $bg-color-light-dark;
    border-color: $border-color-lighter-dark;
  }
}
</style>
